<template>
  <v-container fluid>
    <v-tabs centered>
      <v-tab v-for="tab in tabMenus" :key="tab.id" :to="tab.href">
        {{ tab.name }}
      </v-tab>
    </v-tabs>
    <v-btn
        absolute
        right
        top
        text
        elevation="2"
        class="mr-16"
        @click="showLoginDialog"
    >
      登录
    </v-btn>
  </v-container>
</template>

<script>
export default {
  name: "HeaderBar",
  data() {
    return {
      tabMenus: []
    }
  },
  methods: {
    getTabMenus() {
      this.tabMenus = [
        {id: 1, name: '首页', href: '/'},
        {id: 2, name: '博客', href: '/blog'},
        {id: 3, name: '学堂', href: '/school'},
        {id: 4, name: '影音', href: '/film'},
        {id: 5, name: '考证', href: '/exam'},
      ]
    },
    showLoginDialog() {
      this.$store.commit("blog/loginSwitch", true)
    }
  },
  created() {
    this.getTabMenus()
  }
}
</script>

<style lang="less" scoped>
  .v-tab {
    margin: 0 15px
  }

  .v-btn {
    box-shadow: none !important;
  }
</style>
